<template>
    <div class="box-card">
        <div class="vedioContent">
            <!-- 视频中间的暂停键 -->
            <div class="pauseIcon" v-show="!play">
                <el-icon>
                    <CaretRight />
                </el-icon>
            </div>
            <!-- 视频 -->
            <video ref="vedioDom" @click="playVedio" autoplay @loadedmetadata="totalTimeFn" @timeupdate="curTimeFn">
                <source :src="vedioSrcFirst" type="video/mp4">
            </video>
        </div>
        <!-- 视频进度条 -->
        <div class="progress">
            <div class="progressBotton">
                <div class="slider-demo-block">
                    <el-slider v-model="progressTime" />
                </div>
                <div div class=" progressControls">
                    <!-- 进度条下面的暂停按钮 -->
                    <el-icon size="24px">
                        <VideoPlay />
                    </el-icon>
                    <!-- 进度条下面的时间 -->
                    <div class="vedioTime">
                        {{ curProgress }} / {{ totalTime }}
                    </div>

                </div>
            </div>
        </div>
        <!-- 收藏评论的按钮 -->
        <div class="fnIcons">
            <el-icon>
                <ChatDotRound />
            </el-icon>
            <el-icon>
                <Star />
            </el-icon>
        </div>


    </div>
</template>
<script setup lang="ts">
import { ref, Ref, onMounted } from 'vue'

// 用props获取父元素传过来的的视频的src
interface Props {
    vedioSrcFirst?: string,
}
defineProps<Props>()
// 滑块的进度变量
const progressTime = ref(0)

// 获取视频的dom元素
let vedioDom = ref(null)
interface CustomElement extends HTMLDivElement {
    [key: string]: any;
}


// 用来判断现在是开始还是暂停的情况
let play: Ref<boolean> = ref(true);
// 点击视频的暂停还有开始情况

function playVedio() {
    if (vedioDom.value !== null && !play.value) {
        (vedioDom.value as CustomElement)?.play();
        play.value = true
    }
    else {
        if (vedioDom.value !== null) {
            (vedioDom.value as CustomElement)?.pause();
            play.value = false

        }

    }


}

// 视频进度
let curProgress = ref('00:00')
let totalTime = ref('00:00')
function totalTimeFn() {
    console.log(vedioDom.value);
    // videoTime.currentTime
    if (vedioDom.value !== null) {
        // 获取这个视频的总时长 把他改成形式为00：00的样子
        let time = (vedioDom.value as CustomElement)?.duration;
        time = Math.ceil(time)
        // 这个a是个位数的话 如果超出60的话就再除以60
        let a = Math.floor(time / 60)
        let min = a >= 10 ? a.toString() : '0' + a
        // 再除以60然后再获取 如果是180这样，那么就是180分钟
        let b = time % 60
        let sed = b >= 10 ? b.toString() : '0' + b
        totalTime.value = min + ':' + sed
    }

}
function curTimeFn() {
    if (vedioDom.value !== null) {
        // 获取这个视频的总时长 把他改成形式为00：00的样子
        let time = (vedioDom.value as CustomElement)?.currentTime;
        time = Math.ceil(time)
        // 这个a是个位数的话 如果超出60的话就再除以60
        let a = Math.floor(time / 60)
        let min = a >= 10 ? a.toString() : '0' + a
        // 再除以60然后再获取 如果是180这样，那么就是180分钟
        let b = time % 60
        let sed = b >= 10 ? b.toString() : '0' + b
        curProgress.value = min + ':' + sed
    }

}
onMounted(() => {
    totalTimeFn()
})






</script>
<style lang="scss" scoped>
.box-card {
    position: relative;
    height: 100%;


}

.progress {
    width: 100%;
    position: relative;

}


.vedioContent {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.vedioTime {
    margin-left: 4px;
}

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 350px;
}

.progressControls {
    display: flex;
    justify-content: center;
}

.fnIcons {
    position: absolute;
    top: 51%;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    flex-direction: column;
}

.slider-demo-block {
    display: flex;
    align-items: center;
}

.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 12px;
}

.slider-demo-block .demonstration {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    line-height: 44px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0;
}


// 中心的暂停按钮
.pauseIcon {
    position: absolute;
    font-size: 80px;
    color: #ccc;
}
</style>
